<script lang="ts" setup>
  import logo2 from '/@/assets/logo.png';
  defineProps({
    collapse: {
      type: Boolean,
      default: true
    }
  });
</script>

<template>
  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img :src="logo2" class="sidebar-logo" />
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img :src="logo2" class="sidebar-logo" />
        <div class="sidebar-logo-text">V3 ADMIN</div>
      </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
  .sidebarLogoFade-enter-active,
  .sidebarLogoFade-leave-active {
    transition: opacity 0.35s;
  }

  .sidebarLogoFade-enter-from,
  .sidebarLogoFade-leave-to {
    opacity: 0;
  }

  .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: var(--g-header-height);
    overflow: hidden;
    line-height: var(--g-header-height);
    text-align: center;
    background-color: var(--g-sidebarlogo-bg-color);
    // .sidebar-logo {
    //   display: none;
    // }
    & .sidebar-logo-link {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 10px 4px 10px 10px;
      // justify-content: center;
      cursor: pointer;
      align-items: center;
      // transition: all 0.2s ease;
      .sidebar-logo {
        width: 32px;
        height: 32px;
      }

      & .sidebar-logo-text {
        margin-left: 0.5rem;
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
        vertical-align: middle;
      }
    }

    &.collapse {
      .sidebar-logo {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 0;
        vertical-align: middle;
      }

      .sidebar-logo-text {
        display: none;
      }
    }
  }
</style>
